<template>
	<view class="info-item u-p-t-56" v-for="item in list" :key="item.id">
		<view @click="$u.route(`/pages/index/billDetail?id=${item.id}`)">
			<component :is="infoTitle" :item="item"></component>
			<view class="u-flex-y-center u-m-t-40">
				<view><u-text text="工单名称：" color="#999"></u-text></view>
				<u-text :text="item.name" color="#000" size="28rpx"></u-text>
			</view>
			<view class="u-flex-y-center u-m-t-20">
				<view><u-text text="发货时间：" color="#999"></u-text></view>
				<u-text :text="item.depart_time == 0?'未发货':timeFormat(item.depart_time, 'yyyy-mm-dd hh:MM') " color="#000"
					size="28rpx"></u-text>
			</view>
			<view class="u-flex-y-center u-m-t-20">
				<view><u-text text="送达时间：" color="#999"></u-text></view>
				<u-text :text="item.deliver_time == 0?'未送达':timeFormat(item.deliver_time, 'yyyy-mm-dd hh:MM')" color="#000"
					size="28rpx"></u-text>
			</view>
			<view class="u-flex-y-center u-m-t-20">
				<view><u-text text="应收金额：" color="#999"></u-text></view>
				<view class="u-flex-y-center u-flex-between u-flex-1">
					<u-text :text="`￥${item.money}`" color="#FF5353" size="28rpx"></u-text>
					<view @click.stop="_depart(item)" v-if="item.depart_time == 0">
						<u-button type="primary" color="#0C9BF4" custom-style="width:122rpx;height:60rpx">发货</u-button>
					</view>
					<view @click.stop="handleOut(item)" v-if="item.deliver_time == 0 && item.depart_time != 0">
						<u-button type="primary" color="#25d15e" custom-style="width:122rpx;height:60rpx">送达</u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="gap"></view>
		<view class="u-flex-around u-flex-y-center u-p-t-44 u-p-b-30">
			<view v-if="type == 1" @click="$u.route(`/pages/index/newReturn?id=${item.id}&car_id=${item.car_id}`)">
				<u-text text="新增返程工单" prefix-icon="/static/images/icon_add.png"
					iconStyle="width:32rpx;height:32rpx;marginRight:10rpx"></u-text>
			</view>
			<view>
				<u-text text="编辑"
					@click="$u.route(type==1?`/pages/index/newOrder?id=${item.id}`:`/pages/index/newReturn?id=${item.id}&type=2`)"
					prefix-icon="/static/images/icon_edit.png" iconStyle="width:32rpx;height:32rpx;marginRight:10rpx"></u-text>
			</view>
			<view @click="_delOrder(item)">
				<u-text text="删除" prefix-icon="/static/images/icon_clear.png"
					iconStyle="width:32rpx;height:32rpx;marginRight:10rpx"></u-text>
			</view>
		</view>
		<u-modal :show="show" @confirm="handleConfirm" title="送达照片" @cancel="handleClose" showCancelButton>
			<div style="width: 100%;">
				<u-upload class="u-m-t-20" width="160rpx" height="160rpx" :fileList="fileList" multiple max-count="3"
					@afterRead="afterRead" @delete="deletePic">
					<u-image src="/static/images/icon_upload.png" width="160rpx" height="160rpx"></u-image>
				</u-upload>
			</div>
		</u-modal>
	</view>
</template>

<script setup>
	import infoTitle from '@/components/info-title/info-title.vue'
	import { timeFormat } from 'uview-plus'
	import { ref } from 'vue';
	import {
		deliver,
		delOrder,
		depart
	} from '../../config/api';
	import { _upload } from '../../util/util';
	const emit = defineEmits(['orderList'])
	const props = defineProps({
		type: {
			type: [String, Number],
			default: 1
		},
		list: {
			type: Array,
			default: []
		}
	})
	const modal = ref({})
	const show = ref(false)
	let fileList = ref([])
	const handleOut = (item) => {
		console.log(item)
		modal.value = item
		show.value = true
	}
	const handleConfirm = () => {
		console.log(fileList.value)
		let images = fileList.value.map(item=>item.url)
		modal.value.images = images
		_deliver(modal.value)
		
	}
	const handleClose = () => {
		show.value = false
		modal.value = {}
	}
	// 上传图片
	const afterRead = async (event) => {
		let list = [].concat(event.file)
		let index = fileList.value.length
		list.forEach((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < list.length; i++) {
			const result = await _upload(list[i].url)
			let item = fileList.value[index];
			console.log(item)
			fileList.value.splice(index, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			index++
		}
	}
	// 删除图片
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1)
	}
	const _deliver = (item) => {
		deliver({
			order_id: item.id,
			images:modal.value.images
		}).then((result) => {
			uni.$u.toast(result.msg)
			emit('orderList')
			show.value = false
		})
	}
	const _depart = (item) => {
		uni.showModal({
			content: '确定要发货吗？',
			success: (res) => {
				if (res.confirm) {
					depart({
						order_id: item.id
					}).then((result) => {
						uni.$u.toast(result.msg)
						emit('orderList')
					})
				}
			}
		})
	}
	const _delOrder = (item) => {
		uni.showModal({
			content: '确定删除此工单吗？',
			success: (res) => {
				if (res.confirm) {
					delOrder({
						order_id: item.id
					}).then(res => {
						uni.$u.toast(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					})
				}
			}
		})
	}
</script>

<style lang="scss">
	.info-item {
		background: #fff;
		padding: 0 30rpx;
		margin-top: 20rpx;
		background: linear-gradient(207deg, #D7F0FF 0%, #FFFFFF 19%);
		border-radius: 20rpx;

		.gap {
			border-top: 2rpx solid #F5F5F5;
			margin-top: 40rpx;
		}
	}
</style>